<template>
  <!-- 我的工具车主版-->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="30"></ceList>
      <div class="con">
        <div v-if="jieguo">
          <!-- <div class="title">
            <div @click="titClick(1)" :class="titIndex == 1 ? 'd1 xuan' : 'd1'">
              车源对比
            </div>
            <div @click="titClick(2)" :class="titIndex == 2 ? 'd2 xuan' : 'd2'">
              车贷计算器
            </div>
          </div> -->

          <div class="calculator" v-if="titIndex == 2">
            <div class="list">
              <div class="li">
                <p>贷款方式</p>
                <el-select v-model="loanType" placeholder="请选择" @change="fangshi">
                  <el-option v-for="(item) in options" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </div>
              <div v-if="loanType == '商业贷款'">
                <div class="li">
                  <p>贷款类型</p>
                  <el-radio-group v-model="commercialLoans.loanType" @change="changeRadio">
                    <el-radio label="1">等额本金</el-radio>
                    <el-radio label="2">等额本息</el-radio>
                  </el-radio-group>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>贷款金额（万元）</p>
                  <el-input v-model.number="commercialLoans.totalPrice" placeholder="请填写贷款金额(万元)"></el-input>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>期限（年）</p>
                  <el-select v-model="commercialLoans.year" placeholder="请选择期限(年)" @change="year_picker">
                    <el-option :label="g" :value="g" v-for="g in commercialLoans.year_list" :key="g"></el-option>
                  </el-select>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>利率（%）</p>
                  <el-select v-model="commercialLoans.interestRate" placeholder="请选择利率(%)" @change="rage_picker">
                    <el-option :label="g" :value="g" v-for="(g, gI) in commercialLoans.interestRate_list"
                      :key="gI"></el-option>
                  </el-select>
                </div>
              </div>
              <div v-if="loanType == '公积金贷款'">
                <div class="li">
                  <p>贷款类型</p>
                  <el-radio-group v-model="accumulationFund.loanType" @change="changeRadio">
                    <el-radio label="1">等额本金</el-radio>
                    <el-radio label="2">等额本息</el-radio>
                  </el-radio-group>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>贷款金额（万元）</p>
                  <el-input v-model.number="accumulationFund.totalPrice" placeholder="请填写贷款金额(万元)"></el-input>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>期限（年）</p>
                  <el-select v-model="accumulationFund.year" placeholder="请选择期限(年)" @change="year_picker">
                    <el-option :label="g" :value="g" v-for="(g, gI) in accumulationFund.year_list" :key="gI"></el-option>
                  </el-select>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>利率（%）</p>
                  <el-select v-model="accumulationFund.interestRate" placeholder="请选择利率(%)" @change="rage_picker">
                    <el-option :label="g" :value="g" v-for="(g, gI) in accumulationFund.interestRate_list"
                      :key="gI"></el-option>
                  </el-select>
                </div>
              </div>
              <div v-if="loanType == '组合贷款'">
                <div class="li">
                  <p>贷款类型</p>
                  <el-radio-group v-model="combinationLoan.loanType" @change="changeRadio">
                    <el-radio label="1">等额本金</el-radio>
                    <el-radio label="2">等额本息</el-radio>
                  </el-radio-group>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>商贷贷款金额（万元）</p>
                  <el-input v-model.number="combinationLoan.zhs_Price" placeholder="请填写商贷贷款金额(万元)"></el-input>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>商贷利率（%）</p>
                  <el-select v-model="combinationLoan.zhs_interestRate" placeholder="请选择利率(%)" @change="(val) => {
                      rage_picker(val, 'commercialLoans_interestRate');
                    }
                    ">
                    <el-option :label="g" :value="g" v-for="(g, gI) in combinationLoan.zhs_interestRate_list"
                      :key="gI"></el-option>
                  </el-select>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>公积金贷款金额（万元）</p>
                  <el-input v-model.number="combinationLoan.zhg_Price" placeholder="请填写公积金贷款金额(万元)"></el-input>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>公积金利率（%）</p>
                  <el-select v-model="combinationLoan.zhg_interestRate" placeholder="请选择公积金利率(%)" @change="(val) => {
                      rage_picker(val, 'accumulationFund_interestRate');
                    }
                    ">
                    <el-option :label="g" :value="g" v-for="(g, gI) in combinationLoan.zhg_interestRate_list"
                      :key="gI"></el-option>
                  </el-select>
                </div>
                <div class="li">
                  <p><span style="color: red">*</span>期限（年）</p>
                  <el-select v-model="combinationLoan.year" placeholder="请选择期限(年)" @change="year_picker">
                    <el-option :label="g" :value="g" v-for="(g, gI) in combinationLoan.year_list" :key="gI"></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="but" @click="submitCal(ruleForm)">开始计算</div>
          </div>
        </div>
        <div v-if="!jieguo">
          <div class="jieguo">
            <div v-show="selectRadio == 1" class="tit">等额本金</div>
            <div v-show="selectRadio == 2" class="tit">等额本息</div>
            <div>
              <el-row>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <p class="p1">{{ tableData.list[0].zong }}</p>
                    <p>每月还款（元）</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <p class="p1">{{ tableData.li }}</p>
                    <p>利息总额（元）</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <p class="p1">{{ tableData.list.length }}</p>
                    <p>还款期数</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <p class="p1">{{ tableData.zong }}</p>
                    <p>还款总额（元）</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="biaoge">
            <el-table :data="tableData.list" style="width: 100%" height="600">
              <el-table-column prop="index" label="还款期数" width="230"></el-table-column>
              <el-table-column prop="zong" label="月供总额" width="235"></el-table-column>
              <el-table-column prop="ben" label="还款本金" width="235"></el-table-column>
              <el-table-column prop="li" label="月供利息" width="235"></el-table-column>
            </el-table>
          </div>
          <div class="fanhui" @click="fenhui">返回计算</div>
        </div>
      </div>
    </div>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import * as CFHL from "../../../components/calculatorForHouseLoan";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
  },
  data() {
    const totalPrice = (rule, value, callback) => {
      // 判断手机号是否正确
      if (value) {
        value = parseInt(value);
        let regTest = /^0/;
        if (regTest.test(value) || isNaN(value)) {
          callback(new Error("请输入正整数"));
        } else {
          if (value * 1 > 200000) {
            // value = 200000;
            callback(new Error("请不要输入超过200000万元"));
          } else {
            callback();
          }
        }
      } else {
        callback(new Error("请输入贷款金额"));
      }
    };
    return {
      xuan: 10,
      titIndex: 2,
      options: ["商业贷款", "公积金贷款", "组合贷款"],
      loanType: "商业贷款",
      jieguo: true,
      ruleForm: "1",
      tableData: {
        li: "",
        zong: "",
        list: [],
      },
      selectRadio: 1,
      commercialLoans: {
        monthlySupply: 0, //月供
        grossInterest: 0, //总利息
        totalRepayment: 0, //还款总额
        totalPrice: "", //贷款金额
        loanType: "1", //商贷贷款类型 1等额本金 2等额本息
        year: "30", //商贷期限
        year_list: [], //商贷期限列表
        interestRate: "4.9%", //商贷默认利率
        interestRate_index: 0,
        interestRate_list: [
          // "4.9%",
          // "3.43%",
          // "3.675%",
          // "3.92%",
          // "4.17%",
          // "4.41%",
          // "4.66%",
          // "5.15%",
          // "5.25%",
          // "5.39%",
          // "5.88%",
          // "6.37%",
        ], //商贷利率列表
      },
      accumulationFund: {
        monthlySupply: 0, //月供
        grossInterest: 0, //总利息
        totalRepayment: 0, //还款总额
        totalPrice: "", //贷款金额
        loanType: "1", //公积金贷款类型 1等额本金 2等额本息
        year: "30", //公积金期限
        year_list: [], //公积金期限列表
        interestRate: "", //公积金默认利率
        interestRate_index: 0,
        interestRate_list: [
          // "3.25%", "3.58%", "3.90%", "4.23%"
        ], //公积金利率列表
      },
      combinationLoan: {
        monthlySupply: 0, //月供
        grossInterest: 0, //总利息
        totalRepayment: 0, //还款总额
        zhs_Price: "",
        zhg_Price: "",
        loanType: "1", //组合贷贷款类型 1等额本金 2等额本息
        year: "30", //组合期限
        year_list: [], //组合期限列表
        zhs_interestRate: "", //商贷默认利率
        zhs_interestRate_index: 0,
        zhs_interestRate_list: [
          // "4.9%",
          // "3.43%",
          // "3.675%",
          // "3.92%",
          // "4.17%",
          // "4.41%",
          // "4.66%",
          // "5.15%",
          // "5.25%",
          // "5.39%",
          // "5.88%",
          // "6.37%",
        ], //商贷利率列表
        zhg_interestRate: "", //公积金默认利率
        zhg_interestRate_index: 0,
        zhg_interestRate_list: [
          // "3.25%", "3.58%", "3.90%", "4.23%"
        ], //公积金利率列表
      },
      rules: {
        totalPrice: [
          { required: true, message: "请输入贷款金额", trigger: "blur" },
          { validator: totalPrice, trigger: "blur" },
        ],
        year: [{ required: true, message: "请选择期限", trigger: "change" }],
        interestRate: [
          { required: true, message: "请选择利率", trigger: "change" },
        ],
      },
      rulesThree: {
        zhs_Price: [
          { required: true, message: "请输入贷款金额", trigger: "blur" },
          { validator: totalPrice, trigger: "blur" },
        ],
        zhg_Price: [
          { required: true, message: "请输入贷款金额", trigger: "blur" },
          { validator: totalPrice, trigger: "blur" },
        ],
        year: [{ required: true, message: "请选择期限", trigger: "change" }],
        zhs_interestRate: [
          { required: true, message: "请选择商贷利率", trigger: "change" },
        ],
        zhg_interestRate: [
          { required: true, message: "请选择公积金利率", trigger: "change" },
        ],
      },
      user: {},
      houseList: [],
      loading: false
    };
  },
  mounted() {
    if (this.$route.query.type) {
      this.titIndex = this.$route.query.type;
    }
    this.initYearList();
    this.getUser();
  },
  methods: {
    changeRadio(e){
      this.selectRadio = e;
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.getlendingRate()
        // this.initContrast();
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    getlendingRate() {
      var i = this.options.findIndex(item => item == this.loanType)
      if (this.loading) return
      this.loading = true
      this.$getHttp("/mob/lendingRates/getlendingRate", { loanType: i + 1 }).then(
        (res) => {
          if (res.code == 200) {
            if (i == 2) {//组合贷款
              this.combinationLoan.zhs_interestRate_list = []
              this.combinationLoan.zhg_interestRate_list = []
              res.lendingRates.forEach(v => {
                if (v.loanType == 1) {

                  this.combinationLoan.zhs_interestRate_list.push(v.loanNum + "%")
                  if (!this.combinationLoan.zhs_interestRate) {
                    this.combinationLoan.zhs_interestRate = v.loanNum + "%"
                  }
                } else {

                  this.combinationLoan.zhg_interestRate_list.push(v.loanNum + "%")
                  if (!this.combinationLoan.zhg_interestRate) {
                    this.combinationLoan.zhg_interestRate = v.loanNum + "%"
                  }
                }
              })
            } else if (i == 1) {//公积金贷款
              this.accumulationFund.interestRate_list = []
              res.lendingRates.forEach(v => {
                this.accumulationFund.interestRate_list.push(v.loanNum + "%")
              })
              this.accumulationFund.interestRate = res.lendingRates[0].loanNum + "%"
            } else {//商业贷款
              this.commercialLoans.interestRate_list = []
              res.lendingRates.forEach(v => {
                this.commercialLoans.interestRate_list.push(v.loanNum + "%")
              })
              this.commercialLoans.interestRate = res.lendingRates[0].loanNum + "%"
            }
            this.loading = false

          }
        }
      );
    },
    //查询加入对比的房源
    initContrast() {
      let contrastIdList = JSON.parse(localStorage.getItem("contrastIdList-cz"));
      if (contrastIdList != null) {
        contrastIdList.forEach((e) => {
          this.$getHttp("/api/mobile/vehicleOwner/queryVehicleInformationById", { vehicleId: e, userId: JSON.parse(localStorage.getItem("userInfo")).id }).then(
            (data) => {
              if (data.code == 200) {

                this.houseList.push(data.vehicleInformation);
              }
            }
          );
        });
        console.log("househouse", this.houseList);
      }
    },
    //删除对比房源
    delHouse(id) {
      let houseLists = this.houseList;
      let idList = [];
      let index = 0;
      for (var i = 0; i < houseLists.length; i++) {
        if (houseLists[i].id == id) {
          index = i;
        } else {
          idList.push(houseLists[i].id);
        }
      }
      this.houseList.splice(index, 1);
      localStorage.setItem("contrastIdList-cz", JSON.stringify(idList));
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    fangshi(e) {
      console.log(e);

      if (this.loanType == "商业贷款") {
        this.ruleForm = "ruleForm1";
      } else if (this.loanType == "公积金贷款") {
        this.ruleForm = "ruleForm2";
      } else if (this.loanType == "组合贷款") {
        this.ruleForm = "ruleForm3";
      }
      this.getlendingRate()
    },
    titClick(num) {
      this.titIndex = num;
    },

    initYearList() {
      let yearList = [];
      for (var i = 0; i < 30; i++) {
        yearList.push(i + 1);
      }
      this.commercialLoans.year_list = yearList;
      this.accumulationFund.year_list = yearList;
      this.combinationLoan.year_list = yearList;
    },
    submitCal(formName) {
      //等额本息    [贷款本金×月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数－1]
      this.jieguo = false;
      if (!this.loading) {
        this.calculateLoan();
      }

    },
    fenhui() {
      this.jieguo = true;
      this.tableData.list = [];
    },
    calculateLoan() {
      let commercialLoans = this.commercialLoans;
      let accumulationFund = this.accumulationFund;
      let combinationLoan = this.combinationLoan;
      if (this.loanType == "商业贷款") {
        let detail = CFHL.calculate(
          commercialLoans.totalPrice * 10000,
          commercialLoans.interestRate.replace("%", "") / 100 / 12,
          commercialLoans.year * 12
        );
        if (commercialLoans.loanType == "2") {
          //等额本息
          this.commercialLoans.monthlySupply = detail.repayPerMouAi;
          this.commercialLoans.grossInterest = detail.totalInterestAi;
          this.commercialLoans.totalRepayment = detail.totalRepayAi;
          this.tableData.li = detail.totalInterestAi;
          this.tableData.zong = detail.totalRepayAi;
          detail.repayPerMouObjAi.repayInterestPerMouArrAi.forEach((e, i) => {
            this.tableData.list.push({
              index: i + 1,
              zong: (
                Number(e) +
                Number(detail.repayPerMouObjAi.repayPrincipalPerMouArrAi[i])
              ).toFixed(2),
              ben: Number(
                detail.repayPerMouObjAi.repayPrincipalPerMouArrAi[i]
              ).toFixed(2),
              li: Number(e).toFixed(2),
            });
          });
        } else {
          //等额本金
          this.commercialLoans.monthlySupply = detail.repayPerMouthAp;
          this.commercialLoans.grossInterest = detail.totalInterestAp;
          this.commercialLoans.totalRepayment = detail.totalRepayPriceAp;
          this.tableData.li = detail.totalInterestAp;
          this.tableData.zong = detail.totalRepayPriceAp;
          detail.repayPerMouObjAp.repayPerMouPriceArrAp.forEach((e, i) => {
            this.tableData.list.push({
              index: i + 1,
              zong: Number(e).toFixed(2),
              ben: (
                Number(e) -
                Number(detail.repayPerMouObjAp.repayInterestPerMouArrAp[i])
              ).toFixed(2),
              li: Number(
                detail.repayPerMouObjAp.repayInterestPerMouArrAp[i]
              ).toFixed(2),
            });
          });
        }
        console.log(detail);
      } else if (this.loanType == "公积金贷款") {
        let detail = CFHL.calculate(
          accumulationFund.totalPrice * 10000,
          accumulationFund.interestRate.replace("%", "") / 100 / 12,
          accumulationFund.year * 12
        );
        console.log(detail, 2);
        if (accumulationFund.loanType == "2") {
          //等额本息
          this.accumulationFund.monthlySupply = detail.repayPerMouAi;
          this.accumulationFund.grossInterest = detail.totalInterestAi;
          this.accumulationFund.totalRepayment = detail.totalRepayAi;
          this.tableData.li = detail.totalInterestAi;
          this.tableData.zong = detail.totalRepayAi;
          detail.repayPerMouObjAi.repayInterestPerMouArrAi.forEach((e, i) => {
            this.tableData.list.push({
              index: i + 1,
              zong: (
                Number(e) +
                Number(detail.repayPerMouObjAi.repayPrincipalPerMouArrAi[i])
              ).toFixed(2),
              ben: Number(
                detail.repayPerMouObjAi.repayPrincipalPerMouArrAi[i]
              ).toFixed(2),
              li: Number(e).toFixed(2),
            });
          });
        } else {
          //等额本金
          this.accumulationFund.monthlySupply = detail.repayPerMouthAp;
          this.accumulationFund.grossInterest = detail.totalInterestAp;
          this.accumulationFund.totalRepayment = detail.totalRepayPriceAp;
          this.tableData.li = detail.totalInterestAp;
          this.tableData.zong = detail.totalRepayPriceAp;
          detail.repayPerMouObjAp.repayPerMouPriceArrAp.forEach((e, i) => {
            this.tableData.list.push({
              index: i + 1,
              zong: Number(e).toFixed(2),
              ben: (
                Number(e) -
                Number(detail.repayPerMouObjAp.repayInterestPerMouArrAp[i])
              ).toFixed(2),
              li: Number(
                detail.repayPerMouObjAp.repayInterestPerMouArrAp[i]
              ).toFixed(2),
            });
          });
        }
      } else if (this.loanType == "组合贷款") {
        //商贷
        var detail1 = CFHL.calculate(
          combinationLoan.zhs_Price * 10000,
          combinationLoan.zhs_interestRate.replace("%", "") / 100 / 12,
          combinationLoan.year * 12
        );
        //公积金
        var detail2 = CFHL.calculate(
          combinationLoan.zhg_Price * 10000,
          combinationLoan.zhg_interestRate.replace("%", "") / 100 / 12,
          combinationLoan.year * 12
        );
        console.log(detail1, detail2);
        if (combinationLoan.loanType == "2") {
          //等额本息
          this.combinationLoan.monthlySupply =
            detail1.repayPerMouAi * 1 + detail2.repayPerMouAi * 1;
          this.combinationLoan.grossInterest =
            detail1.totalInterestAi * 1 + detail2.totalInterestAi * 1;
          this.combinationLoan.totalRepayment =
            detail1.totalRepayAi * 1 + detail2.totalRepayAi * 1;

          this.tableData.li =
            Number(detail1.totalInterestAi) - -Number(detail2.totalInterestAi);
          this.tableData.zong =
            Number(detail1.totalRepayAi) - -Number(detail2.totalRepayAi);
          detail1.repayPerMouObjAi.repayInterestPerMouArrAi.forEach((e, i) => {
            this.tableData.list.push({
              index: i + 1,
              zong: (
                Number(e) +
                Number(detail1.repayPerMouObjAi.repayPrincipalPerMouArrAi[i]) +
                Number(detail2.repayPerMouObjAi.repayInterestPerMouArrAi[i]) +
                Number(detail2.repayPerMouObjAi.repayPrincipalPerMouArrAi[i])
              ).toFixed(2),

              ben: (
                Number(detail1.repayPerMouObjAi.repayPrincipalPerMouArrAi[i]) +
                Number(detail2.repayPerMouObjAi.repayPrincipalPerMouArrAi[i])
              ).toFixed(2),

              li: (
                Number(e) -
                -detail2.repayPerMouObjAi.repayInterestPerMouArrAi[i]
              ).toFixed(2),
            });
          });
        } else {
          //等额本金
          this.combinationLoan.monthlySupply =
            detail1.repayPerMouthAp * 1 + detail2.repayPerMouthAp * 1;
          this.combinationLoan.grossInterest =
            detail1.totalInterestAp * 1 + detail2.totalInterestAp * 1;
          this.combinationLoan.totalRepayment =
            detail1.totalRepayPriceAp * 1 + detail2.totalRepayPriceAp * 1;

          this.tableData.li =
            Number(detail1.totalInterestAp) - -Number(detail2.totalInterestAp);
          this.tableData.zong =
            Number(detail1.totalRepayPriceAp) -
            -Number(detail2.totalRepayPriceAp);
          detail1.repayPerMouObjAp.repayPerMouPriceArrAp.forEach((e, i) => {
            this.tableData.list.push({
              index: i + 1,
              zong: (
                Number(e) +
                Number(detail2.repayPerMouObjAp.repayPerMouPriceArrAp[i])
              ).toFixed(2),

              ben: (
                Number(e) -
                Number(detail1.repayPerMouObjAp.repayInterestPerMouArrAp[i]) +
                (Number(detail2.repayPerMouObjAp.repayPerMouPriceArrAp[i]) -
                  Number(detail2.repayPerMouObjAp.repayInterestPerMouArrAp[i]))
              ).toFixed(2),

              li: (
                Number(detail1.repayPerMouObjAp.repayInterestPerMouArrAp[i]) +
                Number(detail2.repayPerMouObjAp.repayInterestPerMouArrAp[i])
              ).toFixed(2),
            });
          });
        }
      }
    },
    year_picker(e) {
      //选择年份的时候切换利率列表
      var arr1 = [],
        arr2 = [];
      if (this.loanType == "商业贷款") {
        //商贷期限
        this.commercialLoans.year = e;
        if (this.commercialLoans.year == 1) {
          arr1 = [
            "4.35%",
            "3.045%",
            "3.262%",
            "3.48%",
            "3.698%",
            "3.915%",
            "4.132%",
            "4.568%",
            "4.785%",
            "5.22%",
            "5.655%",
          ];
        } else if (
          this.commercialLoans.year > 1 &&
          this.commercialLoans.year <= 5
        ) {
          arr1 = [
            "4.75%",
            "3.325%",
            "3.563%",
            "3.8%",
            "4.037%",
            "4.275%",
            "4.513%",
            "4.955%",
            "5.225%",
            "5.7%",
            "6.175%",
          ];
        } else {
          arr1 = [
            "4.9%",
            "3.43%",
            "3.675%",
            "3.92%",
            "4.17%",
            "4.41%",
            "4.66%",
            "5.15%",
            "5.25%",
            "5.39%",
            "5.88%",
            "6.37%",
          ];
        }
        this.commercialLoans.interestRate_list = arr1;
        this.commercialLoans.interestRate =
          arr1[this.commercialLoans.interestRate_index];
      } else if (this.loanType == "公积金贷款") {
        //公积金期限
        this.accumulationFund.year = e;
        if (this.accumulationFund.year <= 5) {
          arr2 = ["2.75%", "3.025%", "3.3%", "3.575%"];
        } else {
          arr2 = ["3.25%", "3.58%", "3.90%", "4.23%"];
        }
        this.accumulationFund.interestRate_list = arr2;
        this.accumulationFund.interestRate =
          arr2[this.accumulationFund.interestRate_index];
      } else if (this.loanType == "组合贷款") {
        //组合贷期限
        this.combinationLoan.year = e;
        if (this.combinationLoan.year == 1) {
          arr1 = [
            "4.35%",
            "3.045%",
            "3.262%",
            "3.48%",
            "3.698%",
            "3.915%",
            "4.132%",
            "4.568%",
            "4.785%",
            "5.22%",
            "5.655%",
          ];
          arr2 = ["2.75%", "3.025%", "3.3%", "3.575%"];
        } else if (
          this.combinationLoan.year > 1 &&
          this.combinationLoan.year <= 5
        ) {
          arr1 = [
            "4.75%",
            "3.325%",
            "3.563%",
            "3.8%",
            "4.037%",
            "4.275%",
            "4.513%",
            "4.955%",
            "5.225%",
            "5.7%",
            "6.175%",
          ];
          arr2 = ["2.75%", "3.025%", "3.3%", "3.575%"];
        } else {
          arr1 = [
            "4.9%",
            "3.43%",
            "3.675%",
            "3.92%",
            "4.17%",
            "4.41%",
            "4.66%",
            "5.15%",
            "5.25%",
            "5.39%",
            "5.88%",
            "6.37%",
          ];
          arr2 = ["3.25%", "3.58%", "3.90%", "4.23%"];
        }
        this.combinationLoan.zhs_interestRate_list = arr1;
        this.combinationLoan.zhs_interestRate =
          arr1[this.combinationLoan.zhs_interestRate_index];
        this.combinationLoan.zhg_interestRate_list = arr2;
        this.combinationLoan.zhg_interestRate =
          arr2[this.combinationLoan.zhg_interestRate_index];
      }
    },
    rage_picker(e, type) {
      if (this.loanType == "商业贷款") {
        //商贷利率
        this.commercialLoans.interestRate = e;
        this.commercialLoans.interestRate_index =
          this.commercialLoans.interestRate_list.findIndex((r) => {
            return r == e;
          });
      } else if (this.loanType == "公积金贷款") {
        //公积金利率
        this.accumulationFund.interestRate = e;
        this.accumulationFund.interestRate_index =
          this.commercialLoans.interestRate_index.findIndex((r) => {
            return r == e;
          });
      } else if (this.loanType == "组合贷款") {
        if (type == "commercialLoans_interestRate") {
          //组合贷商贷利率
          this.combinationLoan.zhs_interestRate = e;
          this.combinationLoan.zhs_interestRate_index =
            this.commercialLoans.zhs_interestRate_index.findIndex((r) => {
              return r == e;
            });
        } else if (type == "accumulationFund_interestRate") {
          //组合贷公积金利率
          this.combinationLoan.zhg_interestRate = e;
          this.combinationLoan.zhg_interestRate_index =
            this.commercialLoans.zhg_interestRate_index.findIndex((r) => {
              return r == e;
            });
        }
      }
    },
    details(item) {

      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id,
        },
      });

    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;

  .title {
    position: relative;
    width: 940px;
    height: 60px;
    box-sizing: border-box;
    border: 1px solid #d0d0d0;
    border-radius: 6px;

    div {
      position: absolute;
      display: inline-block;
      width: 470px;
      text-align: center;
      line-height: 60px;
      font-size: 18px;
      top: -1px;
      border-radius: 6px;
      cursor: pointer;
    }

    .d1 {
      left: -1px;
    }

    .d2 {
      right: -1px;
    }

    .xuan {
      background-color: #64b6a8;
      color: #fff;
    }
  }

  .duibi {
    width: 938px;
    margin-top: 20px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    overflow-x: scroll;

    .tu {
      margin-top: 43px;
      padding-left: 194px;
      display: flex;

      .tuview {
        display: flex;
        flex-direction: column;
        border: #e0e0e0 1px solid;
        margin-left: 40px;
        width: 280px;
        height: 280px;
        padding: 20px;
        box-sizing: border-box;

        img {
          width: 240px;
          height: 160px;
        }

        .del {
          position: relative;
          font-size: 30px;
          color: #999999;
          left: 36px;
          bottom: 240px;
          cursor: pointer;
        }

        .txt1 {
          color: #333333;
          cursor: pointer;
          font-size: 18px;
          font-weight: 400;
          margin-top: 11px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          word-break: break-all;
          -webkit-box-orient: vertical;
        }

        .txt2 {
          color: #e00000;
          font-size: 24px;
          font-weight: 600;
        }
      }
    }

    .shuju {
      width: 758px;
      margin-left: 80px;

      p {
        font-size: 26px;
        color: #64b6a8;
        margin-top: 30px;
        margin-bottom: 10px;
      }

      .biao {
        margin-top: 10px;
        margin-bottom: 65px;
        display: flex;

        .lietitle {
          display: flex;
          flex-direction: column;
          color: #333333;
          font-size: 20px;
          font-weight: 600;

          .lietxt {
            width: 140px;
            text-align: center;
            height: 60px;
            line-height: 60px;
            border: #e0e0e0 1px solid;
          }
        }

        .lietext {
          display: flex;
          flex-direction: column;
          color: #333333;
          font-size: 20px;
          font-weight: 400px;

          .liedesc {
            width: 320px;
            height: 62px;
            border: #e0e0e0 1px solid;
            line-height: 62px;
            box-sizing: border-box;
            padding: 0px 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .calculator {
    box-sizing: border-box;
    width: 940px;
    height: 740px;
    border: 1px solid #e0e0e0;
    margin-top: 20px;

    .list {
      margin-left: 252px;
      margin-top: 62px;

      .li {
        margin-bottom: 32px;

        p {
          display: inline-block;
          width: 200px;
          margin-right: 20px;
          font-size: 16px;
        }

        /deep/.el-input {
          width: 218px;
        }

        /deep/.el-input__inner {
          width: 218px;
          height: 34px;
          border-radius: 4px;
        }

        /deep/.el-radio__label {
          font-size: 16px;
          margin-left: 6px;
        }

        /deep/.el-radio__inner {
          width: 24px;
          height: 24px;
        }

        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 7px;
          top: 2px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-radio__input.is-checked+.el-radio__label {
          color: #333;
        }
      }
    }

    .but {
      width: 260px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 82px;
      cursor: pointer;
    }
  }

  .jieguo {
    width: 940px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    overflow: hidden;
    padding-bottom: 18px;

    .tit {
      width: 100%;
      height: 47px;
      text-align: center;
      line-height: 47px;
      background-color: #666666;
      color: #fff;
    }

    p {
      text-align: center;
      width: 100%;
      font-size: 16px;
    }

    .p1 {
      font-size: 20px;
      margin-top: 20px;
      margin-bottom: 6px;
    }
  }

  .biaoge {
    margin-top: 20px;
    border: 1px solid #d0d0d0;

    /deep/th .cell {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    /deep/td .cell {
      font-size: 18px;
      color: #333333;
      text-align: center;
    }
  }

  .fanhui {
    width: 260px;
    height: 50px;
    background: #64b6a8;
    border-radius: 6px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;
    cursor: pointer;
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.el-select .el-input .el-select__caret {
  line-height: 70rpx !important;
}
</style>